<template>
    <div>
        <a-modal v-model="show" :title="form.id ? '编辑' : '新增'" @ok="handleOk" @cancel="show = false">
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                <a-form-item label="计划名称">
                    <a-input v-model="form.taskName" />
                </a-form-item>
                <a-form-item label="检查方式">
                    <a-select v-model="form.checkWay" placeholder="选择检查方式" show-search>
                        <a-select-option :value="item.value" v-for="(item, index) in checkWayList" :key="index">
                            {{ item.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="检查类型">
                    <a-select v-model="form.checkType" placeholder="选择检查类型" show-search>
                        <a-select-option :value="item.value" v-for="(item, index) in checkTypeList" :key="index">
                            {{ item.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="附件url ">
                    <a-upload name="file" :multiple="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
                        <a-button>
                            <a-icon type="upload" /> 上传附件
                        </a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item label="开始时间">
                    <a-date-picker style="width:100%" v-model="form.startTime" value-format='YYYY-MM-DD hh:mm:ss' show-time />
                </a-form-item>
                <a-form-item label="结束时间">
                    <a-date-picker style="width:100%" v-model="form.endTime" value-format='YYYY-MM-DD hh:mm:ss' show-time />
                </a-form-item>
                <a-form-item label="备注">
                    <a-input v-model="form.remark" />
                </a-form-item>
                <a-form-item label="表格信息">
                    <a-row type="flex" justify="space-between">
                        <a-col :span="24">
                            <a-row>
                                <a-col span="6">表格id</a-col>
                                <a-col span="18">
                                    <a-select v-model="form.tableQO.questionTableId" placeholder="选择表格id" show-search>
                                        <a-select-option :value="item1.id" v-for="(item1, index1) in tableAllList" :key="index1">
                                            {{ item1.tableName }}</a-select-option>
                                    </a-select>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col span="6">备注</a-col>
                                <a-col span="18">
                                    <a-input v-model="form.tableQO.remark" />
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item label="部门信息">
                    <template v-if="form.taskOrgQOList">
                        <div v-for="(item, index) in form.taskOrgQOList" :key="index">
                            <a-row type="flex" justify="space-between">
                                <a-col :span="22">
                                    <a-row>
                                        <a-col span="6">组织</a-col>
                                        <a-col span="18">
                                            <a-select v-model="item.orgId" placeholder="选择组织" show-search>
                                                <a-select-option :value="item1.orgId" v-for="(item1, index1) in orgList" :key="index1">
                                                    {{ item1.orgName }}</a-select-option>
                                            </a-select>
                                        </a-col>
                                    </a-row>
                                    <a-row>
                                        <a-col span="6">负责员工</a-col>
                                        <a-col span="18">
                                            <a-select v-model="item.userId" placeholder="负责员工" show-search>
                                                <a-select-option :value="item1.userId" v-for="(item1, index1) in userAllList" :key="index1">
                                                    {{ item1.userName }}</a-select-option>
                                            </a-select>
                                        </a-col>
                                    </a-row>
                                </a-col>
                                <a-col :span="2" class="c">
                                    <a-popconfirm title="你确定要删除该选项吗?" ok-text="删除" cancel-text="取消"
                                        @confirm="deleteOrg(index)">
                                        <a-icon type="close" style="font-size:20px;color:red;cursor: pointer;" />
                                    </a-popconfirm>
                                </a-col>
                            </a-row>
                            <a-divider />
                        </div>
                    </template>
                    <a-button type="primary" @click="addOrg">
                        添加部门信息
                    </a-button>
                </a-form-item>
                <span style="font-size:0px;">{{ show10 }}</span>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
    import { message } from 'ant-design-vue';
    import moment from "moment"
    import { postPlanUpdate, postPlanAdd } from "@/services"
    export default {
        props: {
            // 检查方式列表
            checkWayList: {
                default: () => { },
                type: Array,
            },
            // 检查类型列表
            checkTypeList: {
                default: () => { },
                type: Array,
            },
            // 全部表格列表
            tableAllList: {
                default: () => { },
                type: Array,
            },
            // 组织列表
            orgList: {
                default: () => { },
                type: Array,
            },
            // 全部用户
            userAllList: {
                default: () => { },
                type: Array,
            },
        },
        watch: {

        },
        data() {
            return {
                // 是否显示弹框
                show: false,
                // 表单
                form: {
                    taskName: '',
                    checkType: undefined,
                    checkWay: undefined,
                    endTime: '',
                    fileUrl: '',
                    remark: '',
                    startTime: '',
                    tableQO: {
                        questionTableId:undefined,
                        remark:'',
                    },
                    taskOrgQOList: [],
                },
                // 防止不响应
                show10: false,
            }
        },
        methods: {
            /**
            * 删除部门信息
            */
            deleteOrg(index){
                this.form.taskOrgQOList.splice(index,1)
                this.show10 = !this.show10
            },
            /**
            * 添加部门信息
            */
            addOrg(){
                this.form.taskOrgQOList.push({
                    orgId:undefined,
                    orgName:'',
                    userId:undefined,
                    userName:undefined,
                })
                this.show10 = !this.show10
            },
            /**
             * 打开弹框
             */
            open(data) {
                this.show = true // 打开弹框
                this.form = this.$options.data().form // 初始化
                if (data?.id) {
                    this.form = {...data}
                    this.form.tableQO = data.tableDTO
                    this.form.taskOrgQOList = data.orgDTOList ? data.orgDTOList : []
                    delete this.form.createDate
                    // delete this.form.tableQO
                    delete this.form.orgDTOList
                    console.log(this.form)
                }

            },

            /**
             * 确认提交
             */
            async handleOk() {
                let { form } = this
                if (form.taskName === '') {
                    return message.warning('请填写计划名称')
                }
                if (form.checkType === '' || form.checkType === undefined) {
                    return message.warning('请选择检查类型')
                }
                if (form.checkType === '' || form.checkType === undefined) {
                    return message.warning('请选择检查方式')
                }
                if (!form.startTime) {
                    return message.warning('请选择开始时间')
                }
                if (!form.endTime) {
                    return message.warning('请选择结束时间')
                }
                // 遍历数组追加信息
                this.form.taskOrgQOList.forEach((item,index)=>{
                    if(!item.orgName){
                        this.form.taskOrgQOList[index]['orgName'] = this.orgList.find(x=>x.orgId === item.orgId)?.orgName
                    }
                    if(!item.userName){
                        this.form.taskOrgQOList[index]['userName'] = this.userAllList.find(x=>x.userId === item.userId)?.userName
                    }
                })

                // 赋值
                let formCopy = {...form}
                formCopy.startTime = moment(formCopy.startTime).format('YYYY-MM-DD hh:mm:ss')
                formCopy.endTime = moment(formCopy.endTime).format('YYYY-MM-DD hh:mm:ss')
                if (form.id) {
                    let res = await postPlanUpdate(formCopy)
                    if (res.code == 0) {
                        message.success('修改成功')
                    } else {
                        return message.warning(res?.msg)
                    }
                } else {
                    let res = await postPlanAdd(formCopy)
                    if (res.code == 0) {
                        message.success('添加成功')
                    } else {
                        return message.warning(res?.msg)
                    }
                }
                this.show = false
                this.$emit('ok', 1);
            },
            
        },
    }
</script>
<style>
    .c {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>